<template>
	<body-wrap isFlex>
		<view class="formBox">
			
			<view class="formItemBox">
				<view class="title">回复详情</view>
				<view class="fmipbox fmipbox2">
					<textarea v-model="fmData.content" class="myTextarea" placeholder="请输入回复详情" />
				</view>
			</view>
	
			<view class="formItemBox">
				<view class="title">收取费用</view>
				<view class="fmipbox">
					<input class="myInput" v-model="fmData.price" placeholder="请输入金额" />
				</view>
			</view>
	
			<view class="formItemBox">
				<view class="title">是否公开</view>
				<view class="fmipbox fmipbox3">
					<radio-group @change="radioChange">
						<label class="itemrbbox">
							<radio value="1" :checked="true" /> <view>公开</view> <view class="fmtips">（所有人都能看）</view>
						</label>
						<label class="itemrbbox">
							<radio value="2" /><view>隐私</view><view class="fmtips">（只有问题所属客户可以看）</view>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		<template #footer>
			<view class="footer-btn-box">
				<view class="myBtn" @click="save">确定回复</view>
			</view>
		</template>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import {addComment} from "@/api/consult.js"
	import {toast} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
				fmData:{privacy:1},
			})
			
			onLoad(options=>{
				if(options && options.id){
					state.fmData.questionId = options.id
				}
			})
			
			onMounted(()=>{
				
			})
			
			const radioChange =(e)=> {
				state.fmData.privacy = e.detail.value
			}
			
			const save = async ()=>{
				if(!state.fmData.content){
					return toast('请输入回复详情')
				}
				const res = await addComment({
					userId:state.userInfo._id,
					type:5, // 教师回复
					...state.fmData
				})
				if(res.code == 200){
					toast('回复成功')
					uni.navigateBack({delta:1}) // 返回
				}else{
					toast('回复失败，请重试！')
				}
			}
			
			return {
				...toRefs(state),
				radioChange,
				save
			}
		}
	})
</script>

<style lang="scss" scoped>
	.formBox{
		padding:0 20rpx 20rpx 20rpx;
	}
	.formItemBox{
		margin: 20rpx 0 0 0;
		.title{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			height: 70rpx;
			&:before{
				content: '';
				display: block;
				width: 7rpx;
				height: 30rpx;
				background: #e3af2f;
				margin: 0 10rpx 0 0;
			}
		}
		.fmipbox{
			box-sizing: border-box;
			border: 1px solid #e5e5e5;
			border-radius: 5px;
			height: 70rpx;
			padding: 0 15rpx;
			background: #fff;
			&.fmipbox2{
				height: auto;
			}
			&.fmipbox3{
				display: flex;
				height: auto;
				border: none;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				.teacherBox{
					flex: 1;
				}
				.iconfont{
					display: flex;
					align-items: center;
				}
			}
			.myInput{
				width: 100%;
				height: 100%;
			}
			.myTextarea{
				width: 100%;
				height: 250rpx;
				padding:15rpx 0;
			}
			.itemrbbox{
				display: flex;
				&+.itemrbbox{
					margin-top: 20rpx;
				}
				.fmtips{
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
</style>
